<template>
  <div>
    <h1>语法糖介绍</h1>
    <h1>{{ myname }}</h1>
    <h1>{{ data.age }}</h1>
    <h1 @click="say">{{ dou }}</h1>
    <button @click="send">语法糖子传父</button>
    <ak-son></ak-son>
  </div>
</template>
<!-- setup的语法糖 -->
<script lang="ts" setup>
import akSon from './akSon.vue'
import {
  ref,
  computed,
  reactive,
  useAttrs,
  useSlots,
  onMounted,
  defineEmits,
  defineProps,
  defineComponent,
  provide
} from 'vue'

// provide 传参 像子孙后代组件传参
let color = ref('红色')
provide('color', color)

let myname = ref('小孙')
// //setup 语法糖提供的props使用方式  defineProps
let props = defineProps(['shengao'])
console.log(props.shengao)

// // setup语法糖 提供的 emit 使用方式
let emit = defineEmits(['sendlist'])
let send = () => {
  emit('sendlist', '你好')
}
// emit("sendlist", "你好");
// setup 语法糖注册子组件
defineComponent({ akSon: akSon })

// setup语法糖使用attrs
let attrs = useAttrs()
console.log(attrs)

// setup语法糖使用slots
let slots = useSlots()
console.log(slots)

onMounted(() => {
  console.log('挂载后')
})
let data = reactive({
  age: 88,
  sex: '男'
})
let dou = computed(() => {
  return myname.value + '你好'
})

let say = () => {
  alert(111)
}
</script>
